<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i>
                    {{pageTitle}}
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="handle-box flex flex-center">
            <el-button type="primary" icon="el-icon-folder" @click="submitForm('ruleForm')">保存</el-button>
        </div>

        <el-container :style="{'min-height': containerHeight + 'px'}">
            <el-container style="border-top: 1px solid rgb(88, 149, 194)">
                <transition name="el-zoom-in-top">
                    <el-aside
                        :width="asideWidth"
                        style="background-color: rgb(238, 241, 246)"
                        v-show="condition"
                    >
                        <el-tree
                            ref="elTree"
                            node-key="id"
                            :data="treeData"
                            show-checkbox
                            check-strictly
                            :props="defaultProps"
                            @check-change="handleClick"
                            default-expand-all
                            :expand-on-click-node="false"
                        ></el-tree>
                    </el-aside>
                </transition>
                <!-- 收起栏 -->
                <div class="tree_show">
                    <div @click="treeShow" class="icon_click">
                        <i :class="icon_direction"></i>
                    </div>
                </div>
                <el-main style="background-color: rgb(238, 241, 246)">
                    <el-form
                        :model="ruleForm"
                        :rules="rules"
                        ref="ruleForm"
                        label-width="100px"
                        class="demo-ruleForm"
                    >
                        <el-form-item label="所属部门" prop="organizationId">
                            <el-input v-model="ruleForm.organizationName" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="岗位名称" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>

                        <el-form-item label="所属类别" prop="hierarchy">
                            <el-radio-group v-model="ruleForm.hierarchy">
                                <el-radio :label="1">岗位</el-radio>
                                <el-radio :label="2">中层</el-radio>
                                <el-radio :label="3">高层</el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="岗位职责" prop="responsibility">
                            <el-input
                                type="textarea"
                                maxlength="300"
                                show-word-limit
                                v-model="ruleForm.responsibility"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="岗位描述" prop="description">
                            <el-input
                                type="textarea"
                                maxlength="300"
                                show-word-limit
                                v-model="ruleForm.description"
                            ></el-input>
                        </el-form-item>
                    </el-form>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>



<script>
import appMain from '../../../utils/app_main';
export default {
    name: 'jobsetting',
    data() {
        return {
            containerHeight: '',
            pageTitle: '',
            ruleForm: {
                description: '', //岗位描述
                hierarchy: 1, //层级：1岗位，2中层，3高层
                isKernel: '', //是否是核心岗位，0不是  1是
                jobNumber: '', //岗位编号
                name: '', //岗位名称
                organizationId: '', //所属部门，关联organization表,
                responsibility: '', //职责，责任
                organizationName: ''
            },
            treeData: [],
            rules: {
                organizationId: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ],
                name: [
                    {
                        required: true,
                        message: '请输入',
                        trigger: 'change'
                    },
                    {
                        min: 2,
                        max: 200,
                        message: '长度在 2 到 200 个字符',
                        trigger: 'change'
                    }
                ],
                hierarchy: [
                    {
                        required: true,
                        message: '请选择',
                        trigger: 'change'
                    }
                ]
            },
            icon_direction: 'el-icon-arrow-left',
            condition: true,
            asideWidth: '300px',
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'name',
                value: 'id'
            },
            isEdit: false,
            editId: '',
            treeId: {}
        };
    },
    created() {
        // 如果有id就是跳转过来修改的
        if (this.$route.query.id) {
            this.editId = this.$route.query.id;
            this.isEdit = true;
            this.getData(); // 获取要修改的数据
        } else {
            if (this.$route.query.treeId) {
                this.treeId = this.$route.query.treeId;
            }
            this.isEdit = false;
        }
        this.getTree();
    },
    methods: {
        getData() {
            appMain
                .jobInfoFindById({}, this.editId)
                .then(res => {
                    if (res.data.code === 20000) {
                        this.ruleForm = res.data.data;
                    } else {
                        this.$message.error(res.data.message);
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },

        submit() {
            let params = this.ruleForm;
            let mothedName = '';
            if (this.isEdit) {
                mothedName = 'jobInfoUpdateById';
            } else {
                mothedName = 'jobInfoInsert';
            }

            appMain[mothedName](params)
                .then(res => {
                    if (res.data.code === 20000) {
                        if (this.isEdit) {
                            this.getData();
                        }
                        this.$router.push({
                            path: '/jobsettingList' //跳转的路径
                        });
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: res.data.message,
                            type: 'error'
                        });
                    }
                })
                .catch(err => {
                    console.log(err);
                });
            console.log(this.$router);
        },

        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.submit();
                    //this.resetForm('ruleForm');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        treeShow() {
            this.condition = !this.condition;
            if (this.condition) {
                this.asideWidth = '300px';
                this.icon_direction = 'el-icon-arrow-left';
            } else {
                this.asideWidth = '0px';
                this.icon_direction = 'el-icon-arrow-right';
            }
        },
        // 获取树的数据
        getTree() {
            appMain
                .organizationList()
                .then(res => {
                    if (res.data.code === 20000) {
                        this.treeData = res.data.data;
                        if (this.treeId.id) {
                            this.$refs.elTree.setCheckedKeys([this.treeId.id]);
                             this.ruleForm.organizationId = _.cloneDeep(this.treeId.id);
                             this.ruleForm.organizationName = _.cloneDeep(this.treeId.name);
                           
                        }
                    } else {
                        this.$message.error('服务器繁忙，请稍后再试');
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        }, // 树元素点击事件
        handleNodeClick(e) {
            console.log(e, 'treeItem');
            //this.treeId = e.id;
            this.ruleForm.organizationId = _.cloneDeep(e.id);
            this.ruleForm.organizationName = _.cloneDeep(e.name);
            console.log('handleNodeClick', this.ruleForm);
        },
        handleClick(data, checked, node) {
            if (checked) {
                console.log(data, 'handleClick');
                //this.treeId = e.id;
                this.ruleForm.organizationId = _.cloneDeep(data.id);
                this.ruleForm.organizationName = _.cloneDeep(data.name);
                console.log('handleClick', this.ruleForm);
                this.$refs.elTree.setCheckedNodes([data]);
            }
        }
    },
    mounted() {
        var div_height = window.screen.availHeight;
        var height = div_height - 100;
        this.containerHeight = height - 160;
        this.pageTitle = this.$router.currentRoute.meta.title;
    },
    watch: {
        // treeId(n, v) {
        //     if (this.treeId != '') {
        //         this.$refs.elTree.setCheckedKeys([this.treeId]);
        //         this.$nextTick(() => {
        //             //let data = this.$refs.elTree.getCheckedNodes();
        //             console.log('treedata', this.$refs.elTree.getCheckedNodes());
        //             //this.ruleForm.organizationId = _.cloneDeep(data.id);
        //             //this.ruleForm.organizationName = _.cloneDeep(data.name);
        //         });
        //         console.log('watch treeId', this.treeId);
        //         console.log('watch', this.$refs.elTree);
        //     }
        // }
    }
};
</script>

<style scoped>
.handle-box {
    /* padding: 5px 50px; */
    width: 100%;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0px;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    z-index: 1;
}
.el-header {
    line-height: 60px;
}
.icon_click {
    padding-top: 23px;
    height: 50px;
    width: 100%;
    background-color: rgb(169, 203, 229);
    text-align: center;
}

.tree_show {
    width: 16px;
    background-color: rgb(88, 149, 194);
    padding-top: 20rem;
}
.el-aside {
    color: #333;
}

.el-select,
.el-input,
.el-radio-group {
    width: 360px !important;
}

.el-textarea {
    width: 360px !important;
}
</style>
